import {Image, ScrollView, StyleSheet, Text, View} from 'react-native';
import Images from '../images/Images';
import TouchableView from '../components/touchableView';
import screen from '../utils/screen';
import React, {useCallback, useEffect, useState} from 'react';
import {ThemeColor} from '../utils/common';
import {useHeaderHeight} from '@react-navigation/elements';
import {useNavigation,useRoute} from '@react-navigation/native';
import {useCountdown} from '../utils/useCountDown';
import LGBtn from '../components/touchableView/lgBtn';
import {formatTimestamp} from '../utils/dateUtil';


const DecodeSuccess = ()=>{

    const headerHeight = useHeaderHeight()
    const navigation = useNavigation()
    const {params} = useRoute()
    const [count, setCount] = useState(5);
    const [time,setTime] = useState(formatTimestamp(new Date(),'yyyy/MM/dd hh:mm:ss'))


    const getSendTime = useCallback(()=>{
        return formatTimestamp(new Date(),'yyyy/MM/dd hh:mm:ss')
    },[])

    useCountdown(function () {
        if(count>0){
            setCount(count - 1);
        }else{
            navigation.goBack()
        }

    }, 1000);

    useEffect(()=>{
        navigation.setOptions({
            headerTitle:params.title
        })


    },[])



    const renderWait = ()=>{
        return (
            <ScrollView
                contentContainerStyle={{paddingTop:30,paddingHorizontal:10}}
            >
                <Image source={Images.wait} style={{width:screen.PIXEL_140,height:screen.PIXEL_140,alignSelf:'center'}} resizeMode={'contain'}/>
                <Text style={{color:'#111',fontSize:20,fontWeight:'500',alignSelf:'center'}}>等待解密中</Text>

                <View style={styles.content}>
                    <Text style={styles.title}>所有者地址:</Text>
                    <Text style={styles.value}>{global.account.address}</Text>
                    <View style={styles.line}/>

                    <Text style={styles.title}>加密数字资产：</Text>
                    <Text style={styles.value}>{'支付宝芝麻积分鉴证记录.Vault'}</Text>
                    <View style={styles.line}/>

                    <Text style={styles.title}>发起时间：</Text>
                    <Text style={styles.value}>{time}</Text>
                    <View style={styles.line}/>

                    <Text style={styles.title}>资料hash：</Text>
                </View>

                <LGBtn
                    title={`${count}s后返回`}
                    style={styles.nextBtn}
                    onPress={()=>{
                        navigation.goBack()
                    }}
                />

            </ScrollView>
        )
    }

    const renderImport = ()=>{
        return (
            <ScrollView
                contentContainerStyle={{paddingTop:30,paddingHorizontal:10}}
            >
                <Image source={Images.success} style={{width:screen.PIXEL_140,height:screen.PIXEL_140,alignSelf:'center'}} resizeMode={'contain'}/>
                <Text style={{color:'#111',fontSize:20,fontWeight:'500',alignSelf:'center'}}>导入成功</Text>

                <View style={styles.content}>
                    <Text style={styles.title}>加密数字资产</Text>
                    <Text style={styles.value}>{'支付宝芝麻积分鉴证记录.Vault'}</Text>
                    <View style={styles.line}/>

                    <Text style={styles.title}>我的地址</Text>
                    <Text style={styles.value}>{global.account.address}</Text>
                </View>

                <LGBtn
                    title={`${count}s后返回`}
                    style={styles.nextBtn}
                    onPress={()=>{
                        navigation.goBack()
                    }}
                />

            </ScrollView>
        )
    }

    return (
        <View style={[styles.container,{paddingTop:headerHeight}]}>
            {
                params.isSend ? renderWait() : renderImport()
            }

        </View>
    )
}
export default DecodeSuccess

const styles = StyleSheet.create({
    container:{
        flex:1, backgroundColor:ThemeColor.theme
    },
    content:{
        backgroundColor: '#F6F8FB',padding:screen.PIXEL_24,borderRadius:screen.PIXEL_16,
        marginTop:30
    },
    title:{
        color:'#666',fontSize:15
    },
    value:{
        color:'#333',fontSize:16,fontWeight:'500'
    },
    line:{
        height:0.3,backgroundColor: '#eee',width:'100%',marginVertical: 10
    },
    nextBtn:{
        alignSelf:'center',marginTop:30
    }
})
